var data = {
    name : '赵海雷',
    age : 18,
    address : '山西省晋中市寿阳县',
    isWork: false,
    color:'blue',
    countryLists:[
        {shortName:'中国',longName:'中华人民共和国'},
        {shortName:'美国',longName:'美利坚合众国'},
        {shortName:'英国',longName:'大不列颠及北爱尔兰联合王国'},
        {shortName:'俄罗斯',longName:'俄罗斯联邦'},
    ],
    goods:{
        name : 'DBH滑板',
        price : 15.36,
        image : 'aaa.jpg',
        createTime : '2022-03-20 22:22:20',
    },
    message:'你好，李焕英',
    time:(new Date()).getTime(),
    timeChangeNum:0,
    boxClassObj:{
        border: true,
        padding: true,
        color: true,
        'bg-color': true,
        pointer: true,
    },
    boxClassArr:['border', 'padding', 'color', 'bg-color', 'pointer'],
    boxStyleObj:{
        backgroundColor:'orange',
        color:'white',
        borderRadius:'6px',
        padding:'4px 6px',
        cursor: 'pointer',
    },
    boxStyleArr:[
        {
            backgroundColor:'green',
            color:'white',
            borderRadius:'6px',
            padding:'4px 6px'
        },
        {
            marginLeft:'100px',
            cursor: 'pointer',
        },
    ],
};

var vm = new Vue({
    el: '#app',
    data: function(){
        return data;
    },
    computed:{
        reversedMessage: function(){
            return this.message.split('').reverse().join('');
        },
        birthday:{
            get:function(){
                console.log(222);
                let date = new Date(this.time);
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                let hour = date.getHours();
                let minute = date.getMinutes();
                let second = date.getSeconds();

                if(month < 10) month = '0' + month;
                if(day < 10) day = '0' + day;
                if(hour < 10) hour = '0' + hour;
                if(minute < 10) minute = '0' + minute;
                if(second < 10) second = '0' + second;

                return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
            },
            set:function(value){
                console.log(111);
                this.time = new Date(value);
            }
        },
    },
    watch:{
        time: function(newVal, oldVal){
            console.log(oldVal, '原时间');
            console.log(newVal, '新时间');
            this.timeChangeNum ++;
        }
    },
    methods:{
        getReversedMessage: function(){
            return this.message.split('').reverse().join('');
        },
        clickBox1: function(){
            console.log(111);
        },
        clickBox2: function(){
            console.log(222);
        },
        clickButton: function(){
            console.log('clickButton');
        },
        clickMidBox: function(){
            console.log('clickMidBox');
        },
        clickBigBox: function(){
            console.log('clickBigBox');
        },
    },
})

vm.$watch('color', function(newColor, oldColor){
    console.log(newColor, '新颜色');
    console.log(oldColor, '旧颜色');
})